<template>
	<view>
		<view v-for="(item,index) in qryRightList" class="base_box">
			<view class="menu_box" @click="openChild(item)">
				<checkbox @click.stop="clickMenu(item)" :checked="item.checked" />
				<text style="flex: 1;">{{item.name}}</text>
				<u-icon v-if="!item.show" name="arrow-down" size="28"></u-icon>
				<u-icon v-else name="arrow-up" size="28"></u-icon>
			</view>
			<view v-show="item.show">
				<view v-for="(item,index) in item.list">
					<view @click.stop="clickMenu(item)" class="menu_box" style="padding: 20rpx 60rpx;">
						<checkbox :checked="item.checked" />
						<text style="flex: 1;">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn">
			<view  @click="navigateBack" class=""> 取消 </view>
			<view @click="submit" class=""> 保存 </view>
		</view>
	</view>
</template>

<script>
	export default {
		async onLoad(options) {
			this.uid = options.uid || ""
			this.userMenu = options.userMenu || ""
			this.userRight = options.userRight || ''
			await this.getQryRight()
		},
		data() {
			return {
				qryRightList: {},
				uid:"",
				userMenu:"",
				userRight:""
			}
		},
		methods: {
			navigateBack(){
				uni.navigateBack()
			},
			async submit(){
				let data = uni.$u.deepClone(this.qryRightList);
				let userMenu = []
				let userRight = []
				for(let key in data){
					if(data[key].checked){
						userMenu.push(key)
					}
					for(let key2 in data[key].list){
						if(data[key].list[key2].checked){
							userRight.push(key2)
						}
					}
				}
				userMenu = userMenu.join(",")
				userRight = userRight.join(",")
				if(this.uid){
					let message = await this.$api.updateUserRightApi({
						userMenu,
						userRight,
						appUid:this.uid
					})
					uni.showToast({
						title:message.message,
						icon:"none"
					})
					uni.$u.sleep(1500).then(() => {
						uni.navigateBack()
					})
					
				}else{
					uni.$emit("auth",{
						userMenu,
						userRight
					})
					uni.navigateBack()
					
				}
				
			},
			clickMenu(item) {
				item.checked = !item.checked
				console.log(item);
			},
			openChild(item) {
				item.show = !item.show
			},
			async getQryRight() {
				let data = await this.$api.qryRightApi()
				for (let key in data.result) {
					let menuIndex =  this.userMenu.indexOf(key)
					data.result[key] = {
						...data.result[key],
						show: false,
						checked: menuIndex>=0?true:false
					}
					for (let key2 in data.result[key].list) {
						let rightIndex =  this.userRight.indexOf(key2)
						data.result[key].list[key2] = {
							name: data.result[key].list[key2],
							checked: rightIndex>=0?true:false
						}
					}
				}
				this.qryRightList = data.result
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer_btn {
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	
		view {
			background-image: url("/static/images/Registration/button.png");
			background-size: 280rpx 123rpx;
			color: #fff;
			width: 280rpx;
			height: 123rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 49rpx;
		}
	}
	.menu_box {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.base_box {
		background-color: #fff;
	}
</style>